$(function(){

    //  判断用户是否登陆
var username = getCookie('username')
if(username){
    $('.customNav').html(`
    <li style="color:#ccc">
        欢迎:<span style="color:red;">${username}</span>
    </li>
    <li>
        <a href="javascript:;" class="logout">退出</a>
    </li>
    `)
    // 购物车中的数据
    // 先判断本地存储中是否有数据
   var data = localStorage.getItem('data')
   // console.log(data);
   if(!data){
       var arr = [];
   }else{
       var arr = JSON.parse(data)
   }
   $('.shoppingCart .num').html(arr.length);
    $('.logout').click(function(){
        removeCookie('username')
        $('.customNav').html(`
        <li>
            <a href="javascript:;">登录</a>
        </li>
        <li>
            <a href="register.html">注册</a>
        </li>
        `)
        gologin(); 
    })
    
}else{
  $('.customNav').html(`
  <li>
      <a href="javascript:;">登录</a>
  </li>
  <li>
      <a href="register.html">注册</a>
  </li>
  `)
  gologin(); 
}
gologin();
// 购物车点击事件
$('.shoppingCart').on('click',function(){
  if(username){
    location.href="../HTML/shop-cart.html"
  }else{
    layer.msg('请先登录！！！',{
      icon:2,
      time:1500
  },function(){
      localStorage.setItem('url',location.href)
      location.href = "login.html";
  })
  }

})

// 登陆
function gologin(){
    $('.customNav li:first a').click(function(){
        // 点击登录
        // 跳转之前先设置一个本地存储将当前url存起来
        localStorage.setItem('url',location.href)
        // 需要跳转到登录页
        location.href = "login.html";
        // 登录成功后需要跳回来
    })
  }
var flag=true;
// 鼠标滚动实现懒加载
    $(window).scroll(function(){
        // 获取当前滚动条的高度
        var test1=$(document).scrollTop();
        // 获取窗口的高度
        var test2=$(window).height();
        //  获取当前最后一个li的高度
        var test3=$('.shop-content li').last().offset().top;

        // 如果滚动条的高度+窗口的高度>当前最后一个li的高度则需要懒加载
        if(test1+test2>test3){
            // 使用ajax发送请求获取数据
            if(flag){
                flag=false;    //flag是为了ajax还未返回数据多次请求php
            $.get('../php/list.php',res=>{
                var {meta:{status,msg},data} = res;
                if(status==1){
                //    遍历获取到的数据
                var str='';
                
                data.forEach(element => {
                    str += `
                    <li class="shop-detail">
                    <div class="shop-image">
                        <a href="../HTML/detail.html?id=${element.id}">
                            <img src="${element.image}.jpg" style="width:100%;height:100%;"> 
                        </a>
                    </div>
                    <div class="text-detail">
                        <a href="../HTML/detail.html?id=${element.id}">
                            <h3>${element.name}</h3>
                            <p>${element.description}</p>
                            <div class="fg_indexlist_eyes">000</div>
                        </a>
                    </div>
                </li>  `               
                });
                  $('.shop-content').append(str);
                  flag=true;
            }      
            },'json')
           } 
        }
    })

})